<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>水平垂直居中</title>

  <link rel="stylesheet" href="./index.css">
</head>
<body>

  <p><a href="https://zhuanlan.zhihu.com/p/161822219">参考链接</a></p>
<p>
    Flexbox中实现水平垂直居中<br>
    在Flex容器上设置 justify-content、align-items 的值为 center 时，可以让元素在Flex容器中达到水平垂直居中的效果

</p>



    <div class="flex__container">
        <div class="flex__item"></div>
        <!-- <div class="flex__item"></div>
        <div class="flex__item"></div> -->
    </div>



    <p>这种方式特别适应于让Icon图标在容器中水平垂直居中</p>
    <img src="https://pic4.zhimg.com/80/v2-7b54357b7123981ce0ea9f274da21597_720w.png" alt="">

    <p>方法2</p>
    <p>在Flex项目上设置margin: auto</p>

    <div class="flex__container1">
        <div class="flex__item1"></div>
    </div>
</body>
</html>